<template>
	<view class="teampage">
		<view class="searchbox">
			<view class="putbox">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" placeholder="请输入名称/科室" />
				<view class="searchbtn">
					搜索
				</view>
			</view>
		</view>
		<view class="list">
			<view class="itemlist">
				<view class="imgbox">
					<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				</view>
				<view class="infobox">
					<view class="nameline">
						<view class="name">
							王主任
						</view>
						<view class="title">
							专家
						</view>
					</view>
					<view class="hospitalline">
						<view class="hospitalname">
							河北医科大学第二医院
						</view>
						<view class="leve">
							三甲
						</view>
					</view>
					<view class="labelline">
						<view class="itemlabel">
							主任委员
						</view>
					</view>
				</view>
				<view class="type">
					内分泌
				</view>
			</view>
		</view>
		<view class="footbox">
			<view class="iconbox">
				<view class="iconfont icon-fenxiang1"></view>
				分享
			</view>
			
			<view class="footbtn" @click="gotalkteam">
				立即咨询
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			gotalkteam(){
				uni.navigateTo({
					url:'/pagesB/talkteam/talkteam'
				})
			},
		}
	}
</script >

<style lang="less" scoped >
   .teampage{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	   background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	   .searchbox{
	   		  width: 100%;
	   		  height: 60rpx;
	   		  display: flex;
	   		  align-items: center;
	   		  justify-content: space-between;
	   		
	   		  .putbox{
	   			  width: 100%;
	   			  margin-left: 60rpx;
	   			  height: 60rpx;
	   			  line-height: 60rpx;
	   			  display: flex;
	   			  align-items: center;
	   			  justify-content: space-between;
	   			  border-radius: 30rpx;
	   			  background-color: whitesmoke;
	   			  box-sizing: border-box;
	   			  padding-left: 10rpx;
				  
	   			  input{
	   				  height: 60rpx;
	   			  }
	   			  .searchbtn{
	   				  width: 110rpx;
	   				  height: 60rpx;
	   				  border-radius: 30rpx;
	   				  text-align: center;
	   				  font-size:28rpx;
	   				  font-weight: bold;
	   				  line-height: 60rpx;
	   				  box-shadow: 0 0 4rpx 4rpx #f2f2f2;
	   				  
	   			  }
	   		  }
	
	   }
	   .list{
		   width: 100%;
		   box-sizing: border-box;
		   padding: 10rpx;
		   background-color: #f2f2f2;
		   
		   .itemlist{
			   width: 100%;
			   background-color: white;
			   box-sizing: border-box;
			   display: flex;
			   padding:30rpx 10rpx;
			   border-radius: 20rpx;
			   position: relative;
			   .imgbox{
				   width: 100rpx;
				   height: 100%;
				   margin-right: 10rpx;
				   image{
					   width: 100rpx;
					   height: 100rpx;
					   border-radius: 50%;
				   }
				   
			   }
			   .infobox{
				  
				   line-height: 2;
				   .nameline{
					   display: flex;
					   align-items: center;
					   .name{
						   font-weight: bold;
						   margin-right: 20rpx;
					   }
					   .title{
						  
						   height: 40rpx;
						   line-height: 40rpx;
						   background-color:#F9E8FF ;
						   border: 2rpx solid #1a4f8a;
						   color: #1a4f8a;
						   font-size: 24rpx;
						   text-align: center;
						   padding: 4rpx 10rpx;
						   border-radius: 10rpx;
					   }
					   .title1{
						   
						   height: 40rpx;
						   line-height: 40rpx;
						   background-color:#00B5CE ;
						   border: 2rpx solid #E6FCFF;
						   color: #00B5CE ;
						      padding: 4rpx 10rpx;
						   font-size: 24rpx;
						   text-align: center;
						   border-radius: 10rpx;
					   }
					   .title3{
					   						      padding: 4rpx 10rpx;
					   						   height: 40rpx;
					   						   line-height: 40rpx;
					   						   background-color:#E9FFE8;
					   						   border: 2rpx solid #4EB846;
					   						   color: #4EB846 ;
					   						   font-size: 24rpx;
					   						   text-align: center;
					   						   border-radius: 10rpx;
					   }
					   .title4{
					   						   
					   						   height: 40rpx;
					   						   line-height: 40rpx;
					   						   background-color:#FFFADF ;
					   						   border: 2rpx solid #B09400;
					   						   color:#B09400;
					   						      padding: 4rpx 10rpx;
					   						   font-size: 24rpx;
					   						   text-align: center;
					   						   border-radius: 10rpx;
					   }
				   }
				   .hospitalline{
					   display: flex;
					   align-items: center;
					   font-size: 30rpx;
					   .leve{
						   width: 110rpx;
						   height: 40rpx;
						   line-height: 40rpx;
						   background-color:#E6FCFF ;
						  
						   color: #00B5CE;
						   font-size: 24rpx;
						   text-align: center;
						   border-radius: 10rpx;
					   }
				   }
				   .labelline{
					   display: flex;
					   align-items: center;
				   }
				   
			   }
			   .type{
				   position: absolute;
				   right: 0;
				   top: 50rpx;
				   padding: 6rpx 10rpx;
				   text-align: center;
				   font-size: 20rpx;
				   font-weight: bold;
				   background-color:#E9E9E9;
				   border-top-left-radius: 10rpx;
				   border-bottom-left-radius: 10rpx;
			   }
		   }
	   }
	   .footbox{
		   width: 100%;
		   height: 130rpx;
		   position: fixed;
		   bottom: 0;
		   left: 0;
		   right: 0;
		   display: flex;
		   align-items: center;
		   box-sizing: border-box;
		   padding: 20rpx 40rpx;
		   justify-content: space-between;
		   .iconbox{
			   width: 100rpx;
			   text-align: center;
			   .iconfont{
				   margin: auto;
				   font-size: 40rpx;
			   }
		   }
		   .footbtn{
			   width: 500rpx;
			   height: 60rpx;
			   text-align: center;
			   line-height: 60rpx;
			   color: white;
			   font-size: 30rpx;
			   border-radius: 30rpx;
			   background-color: #1a4f8a ;
		   }
		   
	   }
	   
   }
</style>
